<template>
  <div>
    <integral-banner></integral-banner>
    <div class="pc">
      <div class="contant">
        <h2>{{infodetail.title}}</h2>
        <p>发表时间：{{infodetail.update_time}}</p>
        <div class="bot_contant">
          <div v-html="infodetail.content"></div>
          <img :src="infodetail.cover" alt />
        </div>

        <!-- 分享 -->
        <div class="share">
          <span>分享到：</span>
          <a href="javascript:;" @click="sharewechat">
            <i class="iconfont wechat">&#xe6b3;</i>
          </a>
          <a href="javascript:;" @click="weibo()">
            <i class="iconfont web">&#xe6b2;</i>
          </a>
          <a href="javascript:;" @click="qqshare">
            <i class="iconfont qq">&#xe65c;</i>
          </a>
          <!-- <a href="javascript:;" @click="qqQzone()">
            <i class="iconfont qqzom">&#xe658;</i>
          </a>-->
        </div>
        <!-- 微信分享二维码 -->
        <div class="share_wechat_ewm" v-if="share_flag">
          <div class="share_contant">
            <div class="top">
              <span>微信扫一扫</span>
              <i class="iconfont" @click="shareflag">&#xe61d;</i>
            </div>
            <div class="bot">
              <p>打开微信"扫一扫",打开网页后点击屏幕右上角分享按钮</p>
              <div class="qrcode" ref="qrcodeContainer"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_mbo">
      <div class="contant">
        <h2>{{infodetail.title}}</h2>
        <p>发表时间：{{infodetail.update_time}}</p>
        <div class="bot_contant">
          <div class="bot_cont_cont" v-html="infodetail.content"></div>
          <img :src="infodetail.cover" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import integralBanner from "@/components/integralbanner/integralbanner.vue";
// import mDetail from "./mdetail";
import QRCode from "qrcodejs2";
export default {
  components: {
    integralBanner
  },
  data() {
    return {
      share_flag: false,
      url: "",
      desc: "",
      title: "建设银行原接收验证码兑换方式恢复",
      summary: "积分兑了么",
      pics: "",
      articalID: "",
      infodetail: {}
    };
  },
  mounted() {
    window.console.log(this.$route.query.id);
    this.articalID = this.$route.query.id;
    this.url = window.location.href;
    this.getdetail();
  },
  methods: {
    getdetail() {
      this.ajax("web/getArticleInfo", {
        data: { id: this.articalID },
        success: res => {
          this.infodetail = res.msg;
        }
      });
    },
    shareflag() {
      this.share_flag = false;
    },
    sharewechat() {
      this.share_flag = true;
      this.$nextTick(() => {
        new QRCode(this.$refs.qrcodeContainer, {
          text: this.url,
          width: 160,
          height: 160,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    qqshare() {
      var urlPath =
        "https://connect.qq.com/widget/shareqq/index.html?url=" +
        encodeURI(this.url) +
        "&desc=" +
        this.infodetail.desc +
        "&title=" +
        this.infodetail.title +
        "&summary=" +
        this.summary +
        "&pics=" +
        this.infodetail.cover;
      window.open(urlPath);
    },
    qqQzone() {
      let urlPath =
        "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" +
        "&title=" +
        this.infodetail.title +
        "&url=" +
        encodeURIComponent(this.url) +
        "&desc=" +
        this.desc +
        "&summary=" +
        this.summary +
        "&pics=" +
        this.infodetail.cover;

      window.open(urlPath);
    },
    weibo() {
      var urlPath =
        "http://service.weibo.com/share/share.php?" +
        "&title=" +
        this.infodetail.title +
        "&url=" +
        encodeURI(this.url) +
        "&desc=" +
        this.desc +
        "&summary=" +
        this.summary +
        "&pics=" +
        this.infodetail.cover;

      window.open(urlPath);
    }
  }
};
</script>

<style lang="scss" scoped>
// 移动端
@media screen and (max-width: 1200px) {
  .pc {
    display: none;
  }
  .contant {
    width: 100%;
    padding: 0 0.1rem;
    box-sizing: border-box !important;
    h2 {
      text-align: center;
      font-size: 28px;
      color: #333333;
      line-height: 60px;
      margin-top: 10px;
    }
    p {
      text-align: center;
      font-size: 18px;
      color: #999999;
      height: 16px;
      margin-bottom: 0.15rem;
      line-height: 20px;
    }
    .bot_contant {
      width: 100%;
      color: #666;
      font-size: 16px;
      line-height: 28px;
      text-indent: 2em;

      p {
        color: #666;
      }
      img {
        width: 100%;
        margin: 0.1rem 0;
      }
    }
  }
}
@media screen and (min-width: 1200px) {
  .d_mbo {
    display: none;
  }
  .contant {
    width: 900px;
    margin: auto;
    overflow: hidden;
    h2 {
      font-size: 36px;
      color: #333333;
      height: 40px;
      margin-top: 60px;
      line-height: 40px;
    }
    p {
      font-size: 14px;
      color: #999999;
      height: 14px;
      margin-top: 20px;
      margin-bottom: 40px;
      line-height: 14px;
    }
    .bot_contant {
      width: 100%;
      border-bottom: 1px solid #e1e1e1;
      font-size: 16px;
      color: #666;
      line-height: 24px;
      text-indent: 2em;
      .bot_cont_cont {
        font-size: 50px;
      }
      img {
        display: block;
        margin: 30px auto;
        width: 100%;
        // height: 530px;
      }
    }
    .share {
      width: 100%;
      display: flex;
      align-items: center;
      height: 90px;
      margin-top: 15px;
      span {
        font-size: 20px;
        color: #333333;
      }
      a {
        display: block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin-right: 6px;
        .wechat {
          color: #43c624;
        }
        .web {
          color: #ff4a4b;
        }
        .qq {
          color: #1f91ff;
        }
        .qqzom {
          color: #fcbb21;
        }
      }
    }
  }
  .share_wechat_ewm {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    .share_contant {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 460px;
      height: 420px;
      background-color: #fff;
      border-radius: 6px;
      z-index: 9;
      box-shadow: 0 4px 4px rgba($color: #000000, $alpha: 0.2);
      .top {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box !important;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e1e1e1;
        span {
          font-size: 20px;
          color: #333333;
        }
        .iconfont {
          font-size: 26px;
          cursor: pointer;
        }
      }
      .bot {
        width: 100%;
        height: 360px;
        text-align: center;
        p {
          font-size: 16px;
          color: #333333;
          margin-top: 40px;
        }
        .qrcode {
          margin: auto;
          width: 160px;
          margin-top: 70px;
        }
      }
    }
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%,-50%)
  }
}
</style>
